<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="type-info">
        <view class="type-title">{{ currentTypeName }}</view>
      </view>
      <view class="progress-info">
        <view class="progress-text">{{ currentQuestionIndex + 1 }} / {{ totalQuestions }}</view>
      </view>
    </view>

    <!-- 题目卡片 -->
    <view class="question-container" v-if="currentQuestion">
      <question-card 
        :questionData="currentQuestion"
        :questionIndex="currentQuestionIndex + 1"
        :totalQuestions="totalQuestions"
        @select="onAnswerSelected"
        @multipleChoiceConfirm="onMultipleChoiceSelected"
      />
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-else-if="loading">
      <u-loading-icon mode="circle"></u-loading-icon>
      <text class="loading-text">正在加载题目...</text>
    </view>

    <!-- 无题目状态 -->
    <view class="empty-container" v-else>
      <view class="empty-icon">📝</view>
      <text class="empty-text">暂无题目</text>
      <button class="retry-btn" @click="loadQuestions">重新加载</button>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions" v-if="currentQuestion">
      <view class="action-btn" @click="previousQuestion" :class="{ disabled: currentQuestionIndex === 0 }">
        <text class="btn-icon">←</text>
        <text class="btn-text">上一题</text>
      </view>

      <view class="action-btn" @click="toggleFavorite">
        <text class="btn-icon">{{ currentQuestion.isFavorite ? '⭐' : '☆' }}</text>
        <text class="btn-text">收藏</text>
      </view>

      <view class="action-btn show-card-btn" @click="showAnswerCard">
        <text class="btn-text">答题卡</text>
      </view>

      <view class="action-btn primary" @click="nextQuestion">
        <text class="btn-icon">→</text>
        <text class="btn-text">{{ isLastQuestion ? '完成' : '下一题' }}</text>
      </view>
    </view>

    <!-- 完成提示弹窗 -->
    <u-popup :show="showCompletePopup" mode="center" :round="20" :closeable="true" :close-on-click-overlay="false">
      <view class="complete-popup">
        <view class="complete-icon">🎉</view>
        <view class="complete-title">练习完成！</view>
        <view class="complete-stats">
          <view class="stat-item">
            <text class="stat-number">{{ correctCount }}</text>
            <text class="stat-label">正确</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">{{ errorCount }}</text>
            <text class="stat-label">错误</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">{{ accuracy }}%</text>
            <text class="stat-label">正确率</text>
          </view>
        </view>
        <view class="complete-actions">
          <button class="action-button primary" @click="goBack">返回</button>
        </view>
      </view>
    </u-popup>

    <!-- 未完成练习提示弹窗 -->
    <u-popup :show="showUnfinishedPopup" mode="center" :round="20" :closeable="true" :close-on-click-overlay="false">
      <view class="unfinished-popup">
        <view class="popup-icon">📝</view>
        <view class="popup-title">检测到未完成的练习</view>
        <view class="popup-content">您还有未完成的练习，请选择继续练习或重新开始</view>
        <view class="popup-actions">
          <button class="action-button secondary" @click="continuePractice">继续练习</button>
          <button class="action-button primary" @click="restartNewPractice">重新练习</button>
        </view>
      </view>
    </u-popup>

    <!-- 答题卡组件 -->
    <answer-card :visible="showCard" :questions="answerCardData" :currentIndex="currentQuestionIndex" :showSubmit="false"
      @close="showCard = false" @select="handleSelectQuestion" />
  </view>
</template>

<script>
import QuestionCard from '@/components/question-card/question-card.vue'
import AnswerCard from '@/components/answer-card/answer-card.vue'
import { createRandomPractice, getQuestionIds, restartPractice as restartPracticeAPI, getPracticeQuestionDetail, submitPracticeAnswer, completePractice } from '@/api/exam/randomPractice.js'

export default {
  components: {
    QuestionCard,
    AnswerCard
  },
  data() {
    return {
      bankId: '',
      questionType: 1, // 1单选 2多选 3判断
      practiceId: '', // 练习ID
      questions: [], // 题目列表
      questionIds: [], // 题目ID列表
      currentQuestionIndex: 0, // 当前题目索引
      showAnswer: false, // 是否显示答案
      loading: true,
      totalQuestions: 0,
      correctCount: 0, // 正确题数
      errorCount: 0, // 错误题数
      showCompletePopup: false, // 显示完成弹窗
      showUnfinishedPopup: false, // 显示未完成练习弹窗
      unfinishedPracticeId: '', // 未完成的练习ID
      showCard: false, // 控制答题卡显示
      answerCardData: [], // 答题卡数据
      questionStartTime: null, // 题目开始时间
      
      // 题型信息
      typeInfo: {
        1: { name: '单选题', desc: '每题只有一个正确答案' },
        2: { name: '多选题', desc: '每题有多个正确答案' },
        3: { name: '判断题', desc: '判断对错' }
      }
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex]
    },
    currentTypeName() {
      return this.typeInfo[this.questionType]?.name || '题目练习'
    },
    accuracy() {
      const total = this.correctCount + this.errorCount
      return total > 0 ? Math.round((this.correctCount / total) * 100) : 0
    },
    isLastQuestion() {
      return this.currentQuestionIndex === this.totalQuestions - 1
    }
  },
  onLoad(options) {
    // 获取传入的参数
    this.bankId = options.bankId || ''
    this.questionType = parseInt(options.questionType) || 1
    
    if (!this.bankId) {
      uni.showToast({
        title: '题库信息异常',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 2000)
      return
    }
    
    // 加载题目
    this.loadQuestions()
  },
  methods: {
    // 加载题目
    async loadQuestions() {
      this.loading = true
      this.questions = []
      this.currentQuestionIndex = 0
      this.showAnswer = false
      this.correctCount = 0
      this.errorCount = 0
      
      try {
        // 调用创建随机练习接口
        const createRes = await createRandomPractice({
          bankId: this.bankId,
          questionType: this.questionType
        })
        if (createRes.msg === '创建练习成功' && createRes.data) {
          // 获取练习ID
          this.practiceId = createRes.data.practiceId
          
          // 调用方法加载题目列表和第一题
          await this.loadQuestionsByPracticeId()
        } else if(createRes.msg === '您还有未完成的练习，请先完成当前练习') {
          // 获取未完成的练习信息
          this.showUnfinishedPopup = true
          this.practiceId = createRes.data.practiceId
        }else{
          uni.showToast({
            title: createRes.msg || '加载题目失败',
            icon: 'none'
          })
          uni.navigateBack()
          return
        }
      } catch (error) {
        uni.showToast({
          title: '加载题目失败',
          icon: 'none'
        })
        // 失败时使用备用数据
        // this.mockLoadQuestions()
      } finally {
        this.loading = false
      }
    },
    
    // 转换题目数据格式
    transformQuestionData(backendData) {
      // 转换选项数据
      const options = backendData.options.map(option => option.optionContent)
      // 找到正确答案的索引
      const correctAnswer = backendData.answers[0]?.answerContent
      const correctIndex = backendData.options.findIndex(option => option.optionLabel === correctAnswer)
      // 构建正确答案索引数组：找出所有 isCorrect === "1" 的选项索引
      const correctIndexList = backendData.options
        .map((option, index) => option.isCorrect === "1" ? index : null)
        .filter(index => index !== null)
      let selectedOptionsIndexList = []
      if(!backendData.selectedOptions){
        selectedOptionsIndexList = []
      }else{
        selectedOptionsIndexList = backendData.selectedOptions.split(',').map(option => backendData.options.findIndex(option => option.optionLabel === option))
      }
      return {
        id: backendData.questionId.toString(),
        type: backendData.questionType,
        difficulty: parseInt(backendData.difficultyLevel),
        question: backendData.questionTitle,
        code: null,
        options: options,
        correct: correctIndex,
        correctIndexList: correctIndexList,
        easyWrong: null, // 后端数据中没有易错项信息
        explanation: backendData.questionAnalysis || '',
        score: backendData.score,
        tags: backendData.tags,
        useCount: backendData.useCount,
        correctCount: backendData.correctCount,
        isFavorite: backendData.isFavorite || false,
        hasAnswered: backendData.hasAnswered || false,
        isCorrect: backendData.isCorrect || false,
        selectedOptions: backendData.selectedOptions || null,
        selectedOptionsIndexList: selectedOptionsIndexList || []
      }
    },
    
    // 加载题目详细信息
    async loadQuestionDetail(questionId) {
      if (!this.practiceId) {
        console.error('练习ID不存在，无法获取题目详情')
        return null
      }
      try {
        const res = await getPracticeQuestionDetail(this.practiceId, questionId)
        if (res.code === 200) {
          // 处理题目详细信息
          if (res.data) {
            // 将后端数据转换为前端需要的格式
            const questionData = this.transformQuestionData(res.data)
            
            // 更新answerCardData中对应题目的数据
            const answerCardIndex = this.answerCardData.findIndex(q => q.questionId === questionId)
            if (answerCardIndex !== -1) {
              //更新answerCardData中对应题目的数据的hasAnswered和isCorrect，使用 $set 确保响应式更新
              const answerCardItem = this.answerCardData[answerCardIndex]
              this.$set(this.answerCardData, answerCardIndex, {
                ...answerCardItem,
                hasAnswered: questionData.hasAnswered || res.data.hasAnswered || false,
                isCorrect: questionData.isCorrect || res.data.isCorrect || null
              })
            }
            
            // 找到该题目在题目列表中的索引
            const questionIndex = this.questions.findIndex(q => q.id === questionId)
            // 如果找到了题目，更新题目数据
            if (questionIndex !== -1) {
              this.$set(this.questions, questionIndex, questionData)
            } else {
              // 如果没找到，添加到列表
              this.questions.push(questionData)
            }
            
            // 记录题目开始时间
            this.questionStartTime = Date.now()
            
            // 返回转换后的题目数据
            return questionData
          }
        } else {
          console.error('获取题目详细信息失败:', res.msg)
          return null
        }
      } catch (error) {
        console.error('获取题目详细信息异常:', error)
        return null
      }
    },
    
    // 获取选项标签 (A, B, C, D, E...)
    getOptionLabel(index) {
      if (index === null || index === undefined) return ''
      return String.fromCharCode(65 + index)
    },
    
    // 根据practiceId加载题目列表和第一题
    async loadQuestionsByPracticeId() {
      if (!this.practiceId) {
        uni.showToast({
          title: '练习信息异常',
          icon: 'none'
        })
        return false
      }
      
      // 调用 getQuestionIds 获取题目ID列表
      const questionIdsRes = await getQuestionIds(this.practiceId)
      if (questionIdsRes.code === 200 && questionIdsRes.data) {
        if (questionIdsRes.data.questionList && questionIdsRes.data.questionList.length > 0) {
          this.answerCardData = questionIdsRes.data.questionList
          //把questionList中每个题目的questionId遍历出来作为一个对象，存入questions中
          this.questions = questionIdsRes.data.questionList.map(item => ({
            id: item.questionId,
            isFavorite: false // 初始化收藏状态
          }))
          // 设置总题数
          this.totalQuestions = questionIdsRes.data.questionList.length
        }
        if (questionIdsRes.data.firstUnansweredQuestionIndex !== undefined) {
          this.currentQuestionIndex = questionIdsRes.data.firstUnansweredQuestionIndex
        }
        // 如果有第一个未答题的题目ID，获取该题目的详细信息
        if (questionIdsRes.data.firstUnansweredQuestionId) {
          await this.loadQuestionDetail(questionIdsRes.data.firstUnansweredQuestionId)
        }
      } else {
        uni.showToast({
          title: questionIdsRes.msg || '获取题目ID列表失败',
          icon: 'none'
        })
        return false
      }
    },
    
    // 答案选择事件（单选题、判断题）
    async onAnswerSelected(data) {
      if (this.showAnswer) return
      
      if (!this.practiceId) {
        uni.showToast({
          title: '练习信息异常',
          icon: 'none'
        })
        return
      }
      
      // 计算答题用时
      const answerTime = this.questionStartTime ? Math.floor((Date.now() - this.questionStartTime) / 1000) : 0
      
      // 构建提交答案的参数
      const submitData = {
        bankId: parseInt(this.bankId),
        practiceId: parseInt(this.practiceId),
        questionId: parseInt(data.questionId),
        selectedOptionIds: [data.selectedOption + 1], // 选项ID从1开始，所以+1
        userAnswer: this.getOptionLabel(data.selectedOption), // 选项标签 A,B,C,D等
        answerContent: null, // 主观题答案内容，选择题不需要
        answerTime: answerTime
      }
      
      try {
        const res = await submitPracticeAnswer(submitData)
        if (res.code === 200) {
          // data 格式: { selectedOption: index, isCorrect: boolean, questionId: string }
          const isCorrect = res.data.isCorrect !== undefined ? res.data.isCorrect : data.isCorrect
          
          if (isCorrect) {
            this.correctCount++
          } else {
            this.errorCount++
          }
          
          // 更新答题卡数据
          const cardIndex = this.answerCardData.findIndex(item => item.questionId === parseInt(data.questionId))
          if (cardIndex !== -1) {
            this.$set(this.answerCardData, cardIndex, {
              ...this.answerCardData[cardIndex],
              hasAnswered: true,
              isCorrect: isCorrect
            })
          }
          
          // 显示答案
          this.showAnswer = true
        } else {
          console.error('答案提交失败:', res.msg)
          uni.showToast({
            title: res.msg || '答案提交失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('答案提交异常:', error)
        uni.showToast({
          title: '答案提交异常',
          icon: 'none'
        })
      }
    },
    
    // 多选题答案确认事件
    async onMultipleChoiceSelected(data) {
      if (this.showAnswer) return
      
      if (!this.practiceId) {
        uni.showToast({
          title: '练习信息异常',
          icon: 'none'
        })
        return
      }
      
      // 计算答题用时
      const answerTime = this.questionStartTime ? Math.floor((Date.now() - this.questionStartTime) / 1000) : 0
      
      // 构建提交答案的参数
      const submitData = {
        bankId: parseInt(this.bankId),
        practiceId: parseInt(this.practiceId),
        questionId: parseInt(data.questionId),
        selectedOptionIds: data.selectedOptions.map(option => option + 1), // 选项ID从1开始，所以+1
        userAnswer: data.selectedOptions.map(option => this.getOptionLabel(option)).join(','), // 选项标签 A,B,C,D等
        answerContent: null, // 主观题答案内容，选择题不需要
        answerTime: answerTime
      }
      
      try {
        const res = await submitPracticeAnswer(submitData)
        if (res.code === 200) {
          // data 格式: { selectedOptions: [index1, index2], isCorrect: boolean, questionId: string }
          const isCorrect = res.data.isCorrect !== undefined ? res.data.isCorrect : data.isCorrect
          
          if (isCorrect) {
            this.correctCount++
          } else {
            this.errorCount++
          }
          
          // 显示答案
          this.showAnswer = true
          
          // 更新答题卡数据
          const cardIndex = this.answerCardData.findIndex(item => item.questionId === parseInt(data.questionId))
          if (cardIndex !== -1) {
            this.$set(this.answerCardData, cardIndex, {
              ...this.answerCardData[cardIndex],
              hasAnswered: true,
              isCorrect: isCorrect
            })
          }
          
        } else {
          console.error('答案提交失败:', res.msg)
          uni.showToast({
            title: res.msg || '答案提交失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('答案提交异常:', error)
        uni.showToast({
          title: '答案提交异常',
          icon: 'none'
        })
      }
    },
    
    // 显示答题卡
    showAnswerCard() {
      this.showCard = true
    },
    
    // 从答题卡选择题目
    async handleSelectQuestion(index) {
      this.showCard = false
      this.currentQuestionIndex = index
      this.showAnswer = false
      this.questionStartTime = Date.now() // 记录新题目的开始时间
      
      // 检查是否已经加载了该题目
      const question = this.questions[index]
      if (question && question.question) {
        // 如果已经加载，直接切换（索引已更新，计算属性会自动返回正确的题目）
      } else {
        // 如果还没有加载，需要动态加载
        if (this.answerCardData && this.answerCardData.length > index) {
          this.loading = true
          try {
            const questionId = this.answerCardData[index].questionId
            await this.loadQuestionDetail(questionId)
          } catch (error) {
            console.error('加载题目失败:', error)
            uni.showToast({
              title: '加载题目失败',
              icon: 'none'
            })
          } finally {
            this.loading = false
          }
        }
      }
    },
    
    // 上一题
    async previousQuestion() {
      if (this.currentQuestionIndex > 0) {
        const prevIndex = this.currentQuestionIndex - 1
        this.currentQuestionIndex = prevIndex
        this.showAnswer = false
        this.questionStartTime = Date.now() // 记录新题目的开始时间
        
        // 检查是否已经加载了上一题
        const question = this.questions[prevIndex]
        if (question && question.question) {
          // 如果已经加载，直接切换（索引已更新，计算属性会自动返回正确的题目）
        } else {
          // 如果还没有加载，需要动态加载
          if (this.answerCardData && this.answerCardData.length > prevIndex) {
            this.loading = true
            try {
              const questionId = this.answerCardData[prevIndex].questionId
              await this.loadQuestionDetail(questionId)
            } catch (error) {
              console.error('加载上一题失败:', error)
              uni.showToast({
                title: '加载题目失败',
                icon: 'none'
              })
            } finally {
              this.loading = false
            }
          }
        }
      }
    },
    
    // 下一题
    async nextQuestion() {
      const nextIndex = this.currentQuestionIndex + 1
      
      if (nextIndex >= this.totalQuestions) {
        // 练习完成
        // 调用完成练习接口
        if (this.practiceId) {
          try {
            const res = await completePractice(this.practiceId)
            if (res.code === 200) {
            } else {
              console.error('完成练习失败:', res.msg)
            }
          } catch (error) {
            console.error('完成练习异常:', error)
          }
        }
        this.showCompletePopup = true
        return
      }
      
      this.currentQuestionIndex = nextIndex
      this.showAnswer = false
      this.questionStartTime = Date.now() // 记录新题目的开始时间
      
      // 检查是否已经加载了下一题
      const question = this.questions[nextIndex]
      if (question && question.question) {
        // 如果已经加载，直接切换（索引已更新，计算属性会自动返回正确的题目）
      } else {
        // 如果还没有加载，需要动态加载
        if (this.answerCardData && this.answerCardData.length > nextIndex) {
          this.loading = true
          try {
            const questionId = this.answerCardData[nextIndex].questionId
            await this.loadQuestionDetail(questionId)
          } catch (error) {
            console.error('加载下一题失败:', error)
            uni.showToast({
              title: '加载题目失败',
              icon: 'none'
            })
          } finally {
            this.loading = false
          }
        } else {
          uni.showToast({
            title: '题目信息异常',
            icon: 'none'
          })
        }
      }
    },
    
    // 切换收藏状态
    toggleFavorite() {
      this.currentQuestion.isFavorite = !this.currentQuestion.isFavorite
      
      // 这里应该调用API更新收藏状态
      // updateFavorite(this.currentQuestion.questionId, this.currentQuestion.isFavorite)
      
      uni.showToast({
        title: this.currentQuestion.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'none',
        duration: 1000
      })
    },
    
    // 返回
    goBack() {
      this.showCompletePopup = false
      uni.navigateBack()
    },
    
    // 获取未完成的练习信息
    async getUnfinishedPracticeInfo() {
      this.showUnfinishedPopup = true
    },
    
    // 继续练习
    async continuePractice() {
      this.showUnfinishedPopup = false
      this.loading = true
      
      try {
        // 调用方法加载题目列表和第一题
        await this.loadQuestionsByPracticeId()
      } catch (error) {
        console.error('加载未完成练习题目失败:', error)
        uni.showToast({
          title: '加载题目失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 重新练习（使用重新练习接口）
    async restartNewPractice() {
      this.showUnfinishedPopup = false
      this.loading = true
      try {
        // 调用重新练习接口
        const res = await restartPracticeAPI({
          bankId: this.bankId,
          questionType: String(this.questionType)
        })
        
        if (res.code === 200 && res.data && res.data.practiceId) {
          // 设置新的practiceId
          this.practiceId = res.data.practiceId
          // 重置统计数据
          this.correctCount = 0
          this.errorCount = 0
          // 调用方法加载题目列表和第一题
          await this.loadQuestionsByPracticeId()
        } else {
          uni.showToast({
            title: res.msg || '重新练习失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('重新练习失败:', error)
        uni.showToast({
          title: '重新练习失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
page {
  background: linear-gradient(180deg, #f7f7fc 0%, #f2f6ff 100%);
  min-height: 100vh;
}

.container {
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.type-info {
  flex: 1;
}

.type-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.type-desc {
  font-size: 24rpx;
  color: #666;
}

.progress-info {
  text-align: right;
}

.progress-text {
  font-size: 28rpx;
  color: #007AFF;
  font-weight: bold;
}

.question-container {
  padding: 0 30rpx;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 30rpx;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.retry-btn {
  background: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  gap: 15rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
}

.action-btn {
  flex: 1;
  padding: 15rpx 20rpx;
  border-radius: 25rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  gap: 8rpx;
}

.show-card-btn {
  flex: 0.9;
}

.action-btn.primary {
  background: #5BA2F9;
}

.action-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.action-btn:active {
  transform: scale(0.95);
}

.btn-icon {
  font-size: 28rpx;
}

.btn-text {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.action-btn.primary .btn-text,
.action-btn.primary .btn-icon {
  color: #fff;
}

.complete-popup {
  padding: 60rpx 40rpx;
  text-align: center;
  min-width: 500rpx;
}

.complete-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.complete-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
}

.complete-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 50rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #007AFF;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.complete-actions {
  display: flex;
  gap: 20rpx;
}

.action-button {
  flex: 1;
  padding: 25rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  border: none;
  transition: all 0.3s ease;
}

.action-button.secondary {
  background: #f0f0f0;
  color: #666;
}

.action-button.primary {
  background: #007AFF;
  color: #ffffff;
}

.action-button:active {
  opacity: 0.8;
}

.unfinished-popup {
  padding: 60rpx 40rpx;
  text-align: center;
  min-width: 500rpx;
}

.popup-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.popup-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 50rpx;
}

.popup-actions {
  display: flex;
  gap: 20rpx;
}
</style>
